<template>
    <div class="indexPage1">
        <!-- <div class="warmprompt">
            <div class="warmprompttitle"><i class="el-icon-warning-outline"></i> 温馨提示</div>
            <div class="warmpromptItem">1、“我的资源”包括您的原始资源及服务、购买的资源及服务。</div>
            <div class="warmpromptItem">
                2、如需查看您使用资源产生的费用信息，请前往“<el-button link type="primary" @click="toAssignPage('/expense/shoppingtrolley')">费用中心</el-button
                >”查看。
            </div>
            <div class="warmpromptItem">3、新增，更新，删除资源有一定时间的数据延迟，请稍候查看。</div>
        </div> -->
        <kindreminder :pageTitle="false"></kindreminder>
        <div class="contentpiece">
            <!-- <el-switch v-model="value" active-color="#13ce66" inactive-color="#CCCCCC"> </el-switch> -->
            <div class="resource" v-for="(item, index) in resourceListData" :key="index">
                <div class="resourceName">{{ resourceList[index].value }}：</div>
                <div class="resourceBox">
                    <!-- <div class="resourceItem" v-for="(list, li) in item" :key="li" v-show="list.redirect" @click="toAssignPage(list)"> -->
                    <div class="resourceItem" v-for="(list, li) in item" :key="li" @click="toAssignPage(list)">
                        <div>
                            <div class="resourceItemName">{{ list.menuName }}</div>
                            <div class="resourceItemexplain">{{ list.explain }}</div>
                        </div>
                        <div class="resourceItemNum">{{ list.children.length }}</div>
                    </div>
                    <!-- <div class="resourceItem" @click="toAssignPage('/resource/generalview')">
                        <div>
                            <div class="resourceItemName">农场基地</div>
                            <div class="resourceItemexplain">管理的农场数量</div>
                        </div>
                        <div class="resourceItemNum">1</div>
                    </div> -->
                </div>
            </div>
            <!-- <div class="resource">
                <div class="resourceName">数字基地：</div>
                <div class="resourceBox">
                    <div class="resourceItem" @click="toAssignPage('/digitalbase/plant/plantresource')">
                        <div>
                            <div class="resourceItemName">种植资源</div>
                            <div class="resourceItemexplain">管理的种植资源数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">畜牧资源</div>
                            <div class="resourceItemexplain">管理的畜牧资源数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">水产资源</div>
                            <div class="resourceItemexplain">管理的水产资源数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">水产资源</div>
                            <div class="resourceItemexplain">拥有的水产资源数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">加工业资源</div>
                            <div class="resourceItemexplain">管理的加工业资源数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                </div>
            </div> -->
            <!-- <div class="resource">
                <div class="resourceName">数字装备：</div>
                <div class="resourceBox">
                    <div class="resourceItem" @click="toAssignPage('/digitalequipment/communicate/internet')">
                        <div>
                            <div class="resourceItemName">数字通讯</div>
                            <div class="resourceItemexplain">管理的数字通讯数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName" @click="toAssignPage('/digitalequipment/perception/meteorologicalenvironment')">数字感知</div>
                            <div class="resourceItemexplain">管理的数字感知数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">数字视频</div>
                            <div class="resourceItemexplain">管理的数字视频数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">数字仪器</div>
                            <div class="resourceItemexplain">管理的数字仪器数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">数字配件</div>
                            <div class="resourceItemexplain">管理的数字配件数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">智能农机</div>
                            <div class="resourceItemexplain">管理的智能农机数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">数字设备</div>
                            <div class="resourceItemexplain">管理的数字设备数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                </div>
            </div> -->
            <!-- <div class="resource">
                <div class="resourceName">品牌标准：</div>
                <div class="resourceBox">
                    <div class="resourceItem" @click="toAssignPage('/standard/nation/nationstandard')">
                        <div>
                            <div class="resourceItemName">国家标准</div>
                            <div class="resourceItemexplain">管理的国家标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem" @click="toAssignPage('/standard/industry/industrystandard')">
                        <div>
                            <div class="resourceItemName">行业标准</div>
                            <div class="resourceItemexplain">管理的行业标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem" @click="toAssignPage('/standard/place/placestandard')">
                        <div>
                            <div class="resourceItemName">地方标准</div>
                            <div class="resourceItemexplain">管理的地方标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">国际标准</div>
                            <div class="resourceItemexplain">管理的国际标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">国外标准</div>
                            <div class="resourceItemexplain">提供的国外标准的数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">生产规程</div>
                            <div class="resourceItemexplain">管理的生产规程数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">管理标准</div>
                            <div class="resourceItemexplain">管理的管理标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                    <div class="resourceItem">
                        <div>
                            <div class="resourceItemName">工作标准</div>
                            <div class="resourceItemexplain">管理的工作标准数量</div>
                        </div>
                        <div class="resourceItemNum">2</div>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="contentpiece">
            <div class="leftTitle">
                <div class="contentpieceTitle">资源搜索</div>
                <div class="contentpieceTitleRight"><span>已上线资源 1234 个</span><span>覆盖资源大类 3 类</span></div>
            </div>
            <div class="searchBox">
                <el-input v-model="input" class="searchInput" placeholder="请输入关键词搜索服务"></el-input>

                <sxnfbtn>搜索</sxnfbtn>
                <!-- <el-button type="primary">搜索</el-button> -->
            </div>
            <div class="hostserve">
                <div class="hostservetitle">常用资源及服务服务：</div>
                <div class="hostserveBox">
                    <div class="hostserveItem">二维地图TDM</div>
                    <div class="hostserveItem">二维地图TDM</div>
                    <div class="hostserveItem">二维地图TDM</div>
                    <div class="hostserveItem">二维地图TDM</div>
                </div>
            </div>
            <!-- <div class="serveListBox flex">
                <div class="serveListBoxTitle" @click="$store.commit('setServeList', true)">服务列表 <i class="el-icon-arrow-down"></i></div>
            </div> -->
        </div>
        <div class="recommend">
            <div class="leftTitle">
                <div class="contentpieceTitle">为你推荐</div>
                <el-button link type="primary" class="moreBtn">更多</el-button>
            </div>
            <div class="recommendBox">
                <div class="recommendItem">
                    <el-image class="recommendItemImg" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                    <div class="recommendItemRight">
                        <div class="recommendItemTitle">土地资源勘查</div>
                        <div class="recommendItemTitleTip">土地资源勘查服务，是把分散的土地整合成 一个可以交易的大的地块。</div>
                    </div>
                </div>
                <div class="recommendItem">
                    <el-image class="recommendItemImg" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                    <div class="recommendItemRight">
                        <div class="recommendItemTitle">土地资源勘查</div>
                        <div class="recommendItemTitleTip">土地资源勘查服务，是把分散的土地整合成 一个可以交易的大的地块。</div>
                    </div>
                </div>
                <div class="recommendItem">
                    <el-image class="recommendItemImg" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                    <div class="recommendItemRight">
                        <div class="recommendItemTitle">土地资源勘查</div>
                        <div class="recommendItemTitleTip">土地资源勘查服务，是把分散的土地整合成 一个可以交易的大的地块。</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="recommend">
            <div class="leftTitle">
                <div class="contentpieceTitle">帮助文档</div>
                <el-button link type="primary" class="moreBtn">更多</el-button>
            </div>
            <div class="helpdocument">
                <div class="helpdocumentItem" v-for="item in 11" :key="item">如何获取云服务器的初始密码？</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { menus } from "@/utils/menumok";
import { ElMessage } from "element-plus";
// import { useStore } from "vuex";
// const store = useStore();
const router = useRouter();
const value = ref("");
const input = ref("");
const resourceList = ref([
    {
        key: "landresource",
        value: "云上农场",
    },
    {
        key: "digitalbase",
        value: "数字基地",
    },
    {
        key: "digitalequipment",
        value: "数字装备",
    },
    {
        key: "standard",
        value: "品牌标准",
    },
]);
const resourceListData: any = [];
const toAssignPage = (list: any) => {
    if (list.redirect) {
        // store.commit("setSelectMenu", list.redirect);
        // console.log(store.state.system.selectMenu);
        window.open(list.redirect);
        // router.push(list.redirect);
    } else {
        ElMessage.warning("页面正在开发");
    }
    // console.log(list);
};
resourceList.value.forEach((v) => {
    resourceListData.push((menus as any)[v.key]);
});
</script>
<style lang="scss" scoped>
.indexPage1 {
    width: 100%;
    .warmprompt {
        padding: 20px;
        background: #ffffff;
        .warmprompttitle {
            font-size: 14px;
            font-weight: bold;
            color: #252b3a;
        }
        .warmpromptItem {
            font-size: 12px;
            color: #666666;
            margin-top: 10px;
            button {
                padding: 0;
                font-size: 12px;
                margin-top: -4px;
                height: auto;
            }
        }
    }
    .contentpiece {
        padding: 20px;
        background: #ffffff;
        margin-top: 15px;
    }
    .resource {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .resourceName {
            font-size: 12px;
            line-height: 40px;
            white-space: nowrap;
            color: #333333;
            // margin-right: 10px;
            min-width: 100px;
            text-align: right;
        }
        .resourceBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .resourceItem {
            width: 247px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f5f5f5;
            border-radius: 2px;
            padding-left: 20px;
            padding-right: 10px;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 3px;
            cursor: pointer;
            &:hover {
                background: #23b14d;
                color: #ffffff;
                .resourceItemName,
                .resourceItemexplain,
                .resourceItemNum {
                    color: #ffffff;
                }
            }
            // &:nth-child(4n + 1) {
            //     margin-left: 0;
            // }
        }
        .resourceItemName {
            font-size: 12px;
            color: #333333;
        }
        .resourceItemexplain {
            font-size: 12px;
            color: #666666;
        }
        .resourceItemNum {
            font-size: 12px;
            color: #333333;
        }
    }
    .leftTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .contentpieceTitleRight {
            font-size: 12px;
            color: #252b3a;
            span {
                margin-left: 20px;
            }
        }
    }
    .contentpieceTitle {
        font-size: 14px;
        font-weight: bold;
        color: #252b3a;
        margin-right: 10px;
    }
    .searchBox {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .searchInput {
            width: 100%;
            margin-right: 10px;
        }
    }
    .hostserve {
        margin-top: 15px;
        font-size: 12px;
        color: #666666;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 10px;
        border-bottom: 1px dashed #eeeeee;
        .hostservetitle {
            white-space: nowrap;
            margin-right: 10px;
        }
        .hostserveBox {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .hostserveItem {
                padding-right: 11px;
                position: relative;
                margin-left: 10px;
                cursor: pointer;
                margin-bottom: 10px;
                &::after {
                    position: absolute;
                    content: "";
                    width: 1px;
                    height: 100%;
                    top: 0;
                    right: 0;
                    background: #cccccc;
                }
                &:nth-child(10n + 1) {
                    margin-left: 0;
                }
            }
        }
    }
    .serveListBox {
        margin-top: 20px;
        .serveListBoxTitle {
            font-size: 14px;
            color: #252b3a;
            cursor: pointer;
            i {
                margin-left: 10px;
            }
        }
    }
    .moreBtn {
        padding: 0;
        font-size: 14px;
    }
    .recommend {
        padding: 20px;
        background: #ffffff;
        margin-top: 15px;
        .recommendBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            .recommendItem {
                width: 318px;
                height: 82px;
                background: linear-gradient(90deg, #d7e4ed, #e9eef2);
                box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .recommendItemImg {
                    height: 82px;
                    width: 82px;
                    margin: 0 10px;
                }
                .recommendItemRight {
                    width: 200px;
                    .recommendItemTitle {
                        font-size: 16px;
                        color: #333333;
                        line-height: 26px;
                    }
                    .recommendItemTitleTip {
                        font-size: 8px;
                        color: #666666;
                    }
                }
            }
        }
        .helpdocument {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .helpdocumentItem {
                font-size: 14px;
                width: 33.3%;
                color: #252b3a;
                margin-top: 20px;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>
